<template>

  <div class="login-container">

    <div style="display: flex;border-radius: 5px; overflow: hidden">
      <img src="@/assets/img/bg2.jpg" style="width: 230px">
      <div class="login-box">
        <div style="font-size: 24px;font-weight: bold;text-align: center;margin-bottom: 80px;color: #1450aa">图书借阅系统</div>

        <el-form ref="formRef" :model="data.form" :rules="data.rules">

          <el-form-item prop="username">
            <el-input :prefix-icon="User" size="large" v-model="data.form.username" placeholder="请输入账号" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input show-password :prefix-icon="Lock" size="large" v-model="data.form.password" placeholder="请输入密码" />
          </el-form-item>
          <el-form-item prop="role">
            <el-select size="large" v-model="data.form.role">
              <el-option value="USER" label="普通用户"></el-option>
              <el-option value="ADMIN" label="管理员"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="large" type="primary" style="width: 100%" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
        <div style="display: flex">
          <div style="flex: 1">
            <a href="">游客访问</a>
          </div>
          <div>
            还没有账号?去<a href="/register">注册</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

import {reactive,ref} from "vue";
import {User,Lock} from "@element-plus/icons-vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";

const data=reactive({
  form:{role:'USER'},
  rules:{
    username:[
      {required:true,message:'请输入账号',trigger:'blur'}
    ],
    password:[
      {required:true,message:'请输入密码',trigger:'blur'}
    ]

  }
})

const formRef=ref()
const login = () => {
  formRef.value.validate(valid=>{
    if(valid){  //表示表单校验通过
      request.post('/login',data.form).then(res=>{
        if(res.code ==='200'){
          ElMessage.success('登陆成功')
          // 存储用户信息到浏览器的缓存
          localStorage.setItem('xm-user', JSON.stringify(res.data))
          setTimeout(()=>{
            if(res.data.role === 'ADMIN'){
              location.href='/manager/home'
            }else {
              location.href='/front/home'
            }
          },500)
        }else {
          ElMessage.error(res.msg)
        }
      })
    }

  })
}
</script>

<style scoped>

.login-container{
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("@/assets/img/bg.jpg");
  background-size: cover;
}

.login-box{
  width: 500px;
  padding: 40px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  background-color: rgba(255,255,255,0.5);
}
.el-input{
  padding-bottom: 8px !important;
}
.el-select{
  padding-bottom: 8px !important;
}

</style>